<template>
    <u-col>
        <v-app-bar color="white" flat app>
            <v-btn icon @click="$goBack">
                <v-icon>arrow_back</v-icon>
            </v-btn>
            <v-toolbar-title>举报众裁区</v-toolbar-title>
            <v-spacer></v-spacer>
        </v-app-bar>
        <v-divider></v-divider>

        <v-card v-for="report in reports" flat class="mb-10px">
            <v-list-item>
                <v-list-item-avatar size="40" class="mr-10px bd-radius5px">
                    <!--        @click="toUserDetail(talk.user.id)"-->
                    <v-icon size="40">account_circle</v-icon>
                </v-list-item-avatar>
                <v-list-item-content>
                    <v-list-item-title class="subtitle-1">{{report.user.nickname}}</v-list-item-title>
                    <!-- 右上角是举报的位置-->
                </v-list-item-content>
                <v-list-item-action>
                    <v-btn
                            absolute
                            right
                            text
                            fab
                            :color="$commonStatusEnum.valueOf(report.status).color"
                    >
                        <v-icon size="60">{{$commonStatusEnum.valueOf(report.status).icon}}</v-icon>
                    </v-btn>
                    <v-btn
                            absolute
                            right
                            text
                            fab
                            bottom
                            :color="$commonStatusEnum.valueOf(report.status).color"
                            class="pt-40"
                    >
                        {{$commonStatusEnum.valueOf(report.status).name}}
                    </v-btn>
                </v-list-item-action>
            </v-list-item>
            <v-card-text v-if="report.imgs.length" class="pt-0 pb-10px">
                <span v-show="false">{{onlyOneImg = report.imgs.length===1}}</span>
                <div v-for="(img,index) in report.imgs.slice(0,3)" :cols="onlyOneImg?12:4" class="pa-1d5px">
                    <v-img :class="{'bd-l-radius5px':(index===0),'bd-r-radius5px':(index===Math.min(3,report.imgs.length)-1)}"
                           :src="$imgUrl+img.img"
                           :aspect-ratio="onlyOneImg?null:1" max-height="200"
                           :max-width="Math.min(200*img.aspectRatio,230)"
                           :contain="onlyOneImg" position="left"/>
                </div>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-text class="black--text subtitle-1 font-weight-bold pb-0">
                {{report.infoType}}被举报，理由为包含{{report.types}}
                <!--<span v-for="type in report.types">
                        {{type}}
                        <span v-if="report.types.notLast(type)"> ,</span>
                    </span>-->
                的内容
            </v-card-text>
            <v-card-text class="black--text subtitle-1 pb-0">
                <u-row class="row-between">
                    <div class="w15vw  col-all-center">
                        <div>
                            <v-icon color="info">check_circle</v-icon>
                        </div>
                        <div class="info--text body-2">
                            不违规
                        </div>
                    </div>
                    <div class="w60vw">
                        <div class="row-between">
                            <div class="ml-7px info--text body-2">{{report.opposeRatio}}%</div>
                            <div class="mr-5px error--text body-2">{{report.supportRatio}}%</div>
                        </div>
                        <v-progress-linear
                                class="mb-5px"
                                background-color="error"
                                color="info"
                                :value="report.opposeRatio"
                                rounded
                                height="10"
                        ></v-progress-linear>
                        <div class="row-center grey--text body-2">{{report.memberCount}}人参与投票</div>
                    </div>
                    <div class="w15vw col-all-center">
                        <div>
                            <v-icon color="error">error</v-icon>
                        </div>
                        <div class="error--text body-2">
                            违规
                        </div>
                    </div>
                </u-row>
            </v-card-text>
            <v-card-actions class="row-around pb-15">
                <!--                    @click="dialogVisible = false"-->
                <v-btn depressed color="error" class="w45r" @click="openDialog(report.user,report.types[0])">
                    是违规
                </v-btn>
                <!--                    :disabled="!reportType  @click="addReport""-->
                <v-btn depressed color="info" class="w45r"
                       @click="openDialog(report.user,$const.reportType.noViolation)">
                    不违规
                </v-btn>
            </v-card-actions>
        </v-card>

        <report-dialog ref="dialog"></report-dialog>
    </u-col>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
  import Talk from "@/model/Talk"
  import Comment from "@/model/Comment"
  import TalkAPI from "@/views/talk/TalkAPI"
  import {namespace} from "vuex-class"
  import TalkItem from "@/views/talk/item/TalkItem.vue"
  import User from "@/model/User"
  import UnreadNotify from "@/model/UnreadNotify"
  import RouterName from "@/const/RouterName"
  import talk from "@/plugins/store/talk"
  import Report from "@/model/Report"
  import ReportDialog from "@/views/report/ReportDialog.vue"

  const talkModule = namespace('talk')
  const notifyModule = namespace('notify')


  /**
   * 举报一条信息，只有同意和支持，然后几率，
   */
  @Component({
    components: {ReportDialog, TalkItem}
  })
  export default class ReportVue extends Vue {
    content: string = ''
    talks: Talk[] = []
    @talkModule.State('talk') currentTalk: Talk
    @talkModule.State('comment') currentComment: Comment
    @talkModule.State('childComment') currentChildComment: Comment
    @talkModule.State('inputContentFocus') inputContentFocus: boolean
    @notifyModule.State('unreadNotifies') unreadNotifies: UnreadNotify[]
    drawer: boolean = false

    reports: Report[] = []

    vueList: string[] = ['举报中心']/*, '社区建设'*/

    /* @Watch('inputContentFocus')
     watchInputContentFocus(){
       if (this.inputContentFocus){
         console.log(this.$refs['talk_'+this.currentTalk.id][0].$el.scrollHeight)
       }
     }*/

    created() {
      // @ts-ignore
      this.$post('report/queryReports').then(res => {
        this.reports = res.data
      })
    }

    openDialog(user: User, reportType: string) {
      this.$refs.dialog.open(user, reportType)
    }

    toNotifyVue() {
      console.log('点击了监听')
      this.$routerTo(RouterName.notify)
      this.$root.$emit('notifyVueRefresh')
    }

    sendComment(content) {
      this.$store.commit('talk/addComment', content)
    }

    scrollToTalk(talk: Talk) {
      window.scrollTo(0, this.$refs['talk_' + talk.id][0].$el.offsetTop + 56)
    }
  }
</script>
<style lang="scss">
    .v-text-field__details {
        display: none;
    }

    div.v-input__slot {
        margin-bottom: 0;
    }
</style>
